@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />

    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryDayActiveData();
        });

        //图表属性，不包含数据
        var dayActiveOptions = {
            chart: {
                renderTo:'dayActiveCon',
                type:'spline'
            },
            title: {
                text: '日活跃数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '活跃数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                color : "#f7a35c",
                name:'日活跃'
            }],
            tooltip: {
                crosshairs: [{
                    width: 3,
                    color: 'green'
                }, {
                    width: 3,
                    color: 'green'
                }],


                valueSuffix: ''
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var weekActiveOptions = {
            chart: {
                renderTo:'weekActiveCon',
                type:'spline'
            },
            title: {
                text: '周活跃数据统计（工作周）',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '活跃数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name:'周活跃'
            }],
            tooltip: {
                valueSuffix: ''
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var monthActiveOptions = {
            chart: {
                renderTo:'monthActiveCon',
                type:'spline'
            },
            title: {
                text: '月活跃数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '活跃数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                color : "#90ed7d",
                name:'月活跃'
            }],
            tooltip: {
                valueSuffix: ''
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var dayActiveCategories = [];
        var dayActiveDatas = [];

        var weekActiveCategories = [];
        var weekActiveDatas = [];

        var monthActiveCategories = [];
        var monthActiveDatas = [];


        //Ajax 获取数据并解析创建Highcharts图表
        function queryDayActiveData() {
            $.ajax({
                url:'/useranalyze/day-active',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        dayActiveCategories[i] = n[0];
                        dayActiveDatas[i] = n[1]*1;
                    });
                    dayActiveOptions.xAxis.categories = dayActiveCategories;
                    dayActiveOptions.series[0].data = dayActiveDatas;
                    chart = new Highcharts.Chart(dayActiveOptions);
                }
            });

            $.ajax({
                url:'/useranalyze/week-active',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        weekActiveCategories[i] = n[0];
                        weekActiveDatas[i] = n[1]*1;
                    });
                    weekActiveOptions.xAxis.categories = weekActiveCategories;
                    weekActiveOptions.series[0].data = weekActiveDatas;
                    chart = new Highcharts.Chart(weekActiveOptions);
                }
            });

            $.ajax({
                url:'/useranalyze/month-active',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        monthActiveCategories[i] = n[0];
                        monthActiveDatas[i] = n[1]*1;
                    });
                    monthActiveOptions.xAxis.categories = monthActiveCategories;
                    monthActiveOptions.series[0].data = monthActiveDatas;
                    chart = new Highcharts.Chart(monthActiveOptions);
                }
            });
        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">活跃数</a></li>

                </ul>
            </div>

            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayActive">日</button>
                            <button class="btn tip-left" id="weekActive">周</button>
                            <button class="btn tip-right" id="monthActive">月</button>
                        </p>
                        <div id="dayActiveCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekActiveCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthActiveCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>


            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>
    <script>
        $("#dayActive").click(function(){
            $("#dayActiveCon").show();
            $("#weekActiveCon").hide();
            $("#monthActiveCon").hide();
        });

        $("#weekActive").click(function(){
            $("#dayActiveCon").hide();
            $("#weekActiveCon").show();
            $("#monthActiveCon").hide();
        });

        $("#monthActive").click(function(){
            $("#dayActiveCon").hide();
            $("#weekActiveCon").hide();
            $("#monthActiveCon").show();
        });


    </script>

@stop
